/*
 * @Description: 
 * @Author: 张凌瑞
 * @Date: 2021-03-06 09:34:36
 * @LastEditTime: 2021-03-10 15:06:14
 * @LastEditors: 张凌瑞
 */

import React, { FC ,useEffect,useState} from "react";

import { useDispatch ,useSelector,ExamModelState } from "umi";

import styles from "./examlist.less";

import { Form, Input, Button, Checkbox, Tabs, Drawer, Radio, Space ,Select} from 'antd';

import moment from 'moment';// 格式化时间 



const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
}

const { Option } = Select;
const { TabPane } = Tabs;
const examlist: FC = () => {
    let dispatch = useDispatch();
    const [form] = Form.useForm();
    
    const [state, setState] = useState({ visible: false, placement: 'left' });
    
    const [xqlist, setXqList] = useState<any>({});//详情数据
   
    const [list, setList] = useState<any[]>([]);

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //点击 全部 进行中 已结束
    const callback = (key:any) => {
        console.log(key)
    }

   

    useEffect(() => {
        dispatch({ type: 'exam/examList'});
        dispatch({ type: 'exam/examType' });//考试类型
        dispatch({ type: 'exam/classType' });//课程
    }, [])
    
    let { examList, examTypeList ,classTypeList} = useSelector((state: { exam: ExamModelState }) => state.exam);
    
    // console.log(examList);
    // console.log(classTypeList)
      //点击查询按钮
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // subject_text
        // exam_name
        let a:any[]  =  examList.filter((item:any) => {
            return item.exam_name === values.examType && item.subject_text === values.classexam
        })
        setList(a);
    };

    //点击展示详情
    const showDrawer = (id: string) => {
        setState({ visible: true, placement: 'left' });

        let xqlist = examList.filter((item: any) => {
            return item.exam_exam_id === id
        })[0];
        
        setXqList({xqlist})
    };
    // console.log({...xqlist.xqlist});
    
    const onClose = () => {
        setState({ visible: false,placement:'top' });
    };
    
    return <div className={styles.examlist}>
        <h1>试卷列表</h1>
        <div className={styles.nav}>
        <Form
            {...layout}
            name="control-hooks"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
                    >
          
            <Form.Item label="考试类型：" rules={[{ required: true }]} name="examType">
                    <Select allowClear >
                        {
                            examTypeList.map((item:any) => {
                                return <Option value={item.exam_name} key={item.exam_id}>{ item.exam_name}</Option>
                            })
                        }
                    </Select>
            </Form.Item>
            <Form.Item label="课程:" rules={[{ required: true }]} name="classexam">
                    <Select>
                        {
                            classTypeList.map((item: any) => {
                                return <Option value={item.subject_text} key={item.subject_id}>{ item.subject_text}</Option>
                            })
                        }
                    </Select>
            </Form.Item>
            
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                查询
                </Button>
            </Form.Item>
        </Form>
        </div>

        <div className={styles.content}>

            <div className={styles.header}>
                <h4>试卷列表</h4>
                 <Tabs onChange={callback} type="card">
                    <TabPane tab="全部" key="1">
                    </TabPane>
                    <TabPane tab="进行中" key="2">
                    </TabPane>
                    <TabPane tab="已结束" key="3">
                   
                    </TabPane>
                </Tabs>
            </div>

            <ul className={styles.examhead}>
                <li>试卷信息</li>
                <li>班级</li>
                <li>创建人</li>
                <li>开始时间</li>
                <li>结束时间</li>
                <li>操作</li>
            </ul>
            
            <div className={styles.main}>
                {
                    list.length<1? examList.map((item:any) => {
                        return <ul key={item.exam_exam_id}>
                            <li>
                                <span>{item.title}</span>
                                <div>
                                    考试时间: {item.end_time-item.start_time}
                                </div>
                            </li>
                            <li>
                                <span>考试班级</span>
                                <span>{ item.grade_name[0]}</span>
                            </li>
                            <li></li>
                            <li>{item.start_time}</li>
                            <li>{item.end_time}</li>
                            <li>
                                <Space>
                                
                                <Button type="primary" onClick={()=>showDrawer(item.exam_exam_id)} >
                                    详情
                                </Button>
                                    <Drawer
                                    title={{...xqlist.xqlist}.title}
                                    placement='top'
                                    closable={false}
                                    onClose={onClose}
                                    visible={state.visible}
                                    key={state.placement}
                                    height='80%'
                                    >
                                    <ul  className={styles.xq}>
                                        <li><h2>考试类型:</h2> {{...xqlist.xqlist}.exam_name}</li>
                                            <li><h2>课程:</h2> {{ ...xqlist.xqlist }.subject_text}</li>
                                            <li><h2>班级:</h2> {{ ...xqlist.xqlist }.grade_name}</li>
                                            
                                            <li><h2>考试时间</h2> {{ ...xqlist.xqlist }.end_time - { ...xqlist.xqlist }.start_time}
                                        </li>
                                    </ul>
                                    </Drawer>
                                </Space>
                            </li>
                        </ul>
                    }):list.map((item:any) => {
                        return <ul key={item.exam_exam_id}>
                            <li>
                                <span>{item.title}</span>
                                <div>
                                    考试时间: {item.end_time-item.start_time}
                                </div>
                            </li>
                            <li>
                                <span>考试班级</span>
                                <span>{ item.grade_name[0]}</span>
                            </li>
                            <li></li>
                            <li>{item.start_time}</li>
                            <li>{item.end_time}</li>
                            <li>
                                <Space>
                                
                                <Button type="primary" onClick={()=>showDrawer(item.exam_exam_id)}>
                                    详情
                                </Button>
                                </Space>
                                <Drawer
                                title={xqlist.title}
                                placement='top'
                                closable={false}
                                onClose={onClose}
                                visible={state.visible}
                                key={state.placement}
                                >
                                  <ul  className={styles.xq}>
                                        <li><h2>考试类型:</h2> {{...xqlist.xqlist}.exam_name}</li>
                                            <li><h2>课程:</h2> {{ ...xqlist.xqlist }.subject_text}</li>
                                            <li><h2>班级:</h2> {{ ...xqlist.xqlist }.grade_name}</li>
                                            
                                            <li><h2>考试时间</h2> {{ ...xqlist.xqlist }.end_time - { ...xqlist.xqlist }.start_time}
                                        </li>
                                    </ul>
                                </Drawer>
                                <Space/>
                            </li>
                        </ul>
                    })
                }
            </div>


        </div>

    </div>
    

}

export default examlist;